//封装组件 waterfaull.vue
<template>
  <div class="masonry">
    <div class="colmun" v-for="colum in colums" :key="colum" :style="`padding:0 ${gaps}px;`">
      <div :key="i.id" v-for="i in AllData[colum - 1]" class="item">
        <img class="img" :src="i.img" />
        <div class="set_value">{{ i.value }}</div>
      </div>
    </div>
  </div>
</template>

<script>
// import data from './data.json';
let data = [
  {
    id: 0,
    value:
      'Consequatur in ipsa ab sapiente enim. Accusantium aut est voluptas sequi. Quibusdam neque aperiam dolor. Excepturi sunt a minus fuga autem excepturi cupiditate. Fuga aspernatur incidunt aliquid.',
    img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
  },
  {
    id: 1,
    value:
      'Sit qui consequuntur vel quibusdam sit ea sint. Repellendus unde ducimus sed dolor sint iste. Expedita voluptas iste adipisci eos. Impedit dignissimos ratione animi dolorem est.',
    img: 'https://img.zcool.cn/community/031oya7maxksuwxz6qiknkc3139.png?x-oss-process=image/resize,m_fill,w_520,h_390,limit_1/auto-orient,1/sharpen,100/format,webp/quality,q_100'
  },
  {
    id: 2,
    value:
      'Fugiat deserunt doloremque molestiae veritatis beatae aut. Eveniet voluptas sunt accusamus. Quis quos hic itaque. Eveniet est repellendus. Odit sed sint. Repellendus est et.',
    img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
  },
  {
    id: 3,
    value:
      'Quas et fuga eos ducimus reprehenderit necessitatibus. Molestiae fuga maiores nobis id. Id debitis id dignissimos magni repellendus quae. Neque aut officia quia dolorem consequatur facilis esse. Ipsam et in aut est voluptatibus qui labore. Esse qui harum dolores.',
    img: 'https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF'
  },
  {
    id: 4,
    value:
      'Eligendi mollitia est alias molestiae et voluptas ut natus aliquid. Dolorem autem saepe. Accusamus quae quia excepturi iure sint eum vitae. Voluptas rerum soluta rerum ex unde.',
    img: 'https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF'
  },
  {
    id: 5,
    value:
      'Consequatur in ipsa ab sapiente enim. Accusantium aut est voluptas sequi. Quibusdam neque aperiam dolor. Excepturi sunt a minus fuga autem excepturi cupiditate. Fuga aspernatur incidunt aliquid.',
    img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
  },
  {
    id: 6,
    value:
      'Sit qui consequuntur vel quibusdam sit ea sint. Repellendus unde ducimus sed dolor sint iste. Expedita voluptas iste adipisci eos. Impedit dignissimos ratione animi dolorem est.',
    img: 'https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF'
  },
  {
    id: 7,
    value:
      'Fugiat deserunt doloremque molestiae veritatis beatae aut. Eveniet voluptas sunt accusamus. Quis quos hic itaque. Eveniet est repellendus. Odit sed sint. Repellendus est et.',
    img: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF'
  },
  {
    id: 8,
    value:
      'Quas et fuga eos ducimus reprehenderit necessitatibus. Molestiae fuga maiores nobis id. Id debitis id dignissimos magni repellendus quae. Neque aut officia quia dolorem consequatur facilis esse. Ipsam et in aut est voluptatibus qui labore. Esse qui harum dolores.',
    img: 'https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF'
  },
  {
    id: 9,
    value:
      'Eligendi mollitia est alias molestiae et voluptas ut natus aliquid. Dolorem autem saepe. Accusamus quae quia excepturi iure sint eum vitae. Voluptas rerum soluta rerum ex unde.',
    img: 'https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF'
  },

  {
    id: 10,
    value: '测试内容说得很好还是DHV给你放技能不氪金大富科技你的发链接女警你看九年级女警记录',
    img: 'https://img.zcool.cn/community/031p0wp6wjd2u53usrklyns3634.png?x-oss-process=image/resize,m_fill,w_520,h_390,limit_1/auto-orient,1/sharpen,100/format,webp/quality,q_100'
  }
];

export default {
  props: {
    colums: {
      type: Number,
      default: 3
    },
    gaps: {
      type: Number,
      default: 2
    }
  },
  setup(props) {
    // 所有colums 集合
    var AllData = [];
    // 默认AllData里面对应colums (多少列个)个[]
    var nowData = [];
    //创建对应 colums数组
    for (var j = 0; j < props.colums; j++) {
      AllData.push(nowData);
    }

    // 每列 colums 分配数据
    for (var l = 1; l <= AllData.length; l++) {
      for (var k = 1; k <= data.length; k++) {
        if ((k - l) % props.colums === 0) {
          AllData[l - 1] = [...AllData[l - 1], data[k - 1]];
        }
      }
    }

    console.log('----AllData', AllData);

    return {
      AllData
    };
  }
};
</script>

<style lang="scss" scoped>
.masonry {
  display: flex;
  flex-direction: row;
  background-color: #f2f2f2;
  .colmun {
    display: flex;
    flex-direction: column;
    flex: 1;
    // padding: 0 2px;
    .item {
      background-color: #fff;
      margin-bottom: 5px;
      box-shadow: 4px 4px 5px #f2f2f2;
      .img {
        width: 100%;
      }

      .set_value {
        // text-align: justify;
        height: 90px;
        line-height: 30px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
      }
    }
  }
}
</style>
